<template>
	<view class="forms">
		<u--form ref="uForm" labelWidth="160rpx" :model="form">
			<u-form-item label="联系手机:" prop="phone">
				<u--input @input="phoneChange" placeholder="请输入手机号码" border="none" v-model="form.mobile" maxlength="11"></u--input>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	export default {
		props: {
			form: {
				type: Object,
				default: () => {
					return {
						mobile: ''
					}
				}
			}
		},
		data() {
			return {
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号码'
					},{
						pattern: /^1[3456789]\d{9}$/,
						message: '请输入正确手机号码'
					}]
				}
			}
		},
		methods: {
			setRules() {
				this.$refs.uForm.setRules(this.rules)
			},
			phoneChange(e) {
				this.$emit('update:form', this.form)
				this.$emit('change', this.form)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.forms {
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}
</style>